<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import usePostStore from '@/store/post/index.js'
import router from '@/router/index.js'
import { AiEditor } from "aieditor"
import "aieditor/dist/style.css"
import { onMounted, reactive, ref ,nextTick } from 'vue'
import useLoginStore from '@/store/user/index.js'

const postStore = usePostStore()
const isEdit = ref(false)
const formData = reactive({
  title: '',
  status: 0,
  content: '',
  delFlag:0
})
const divRef = ref()
let aiEditor = null
const loginStore = useLoginStore()
const postId = router.currentRoute._rawValue.query.id;
// 初始化页面，加载数据（修改时）
onMounted(async () => {
    console.log('传过来的id是',router.currentRoute._rawValue.query.id)

    if (postId != null) {
        try {
            console.log('我进来了')
            isEdit.value = true;
            console.log('isEdit', isEdit)
            const details = await postStore.getPostDetail(postId);
          console.log('details.data', details.data)
          if (details.data) {
            Object.assign(formData, details.data);
          }
        } catch (error) {
            ElMessage.error("加载帖子详情失败");
        }
    }
    aiEditor = new AiEditor({
      element: divRef.value,
      placeholder: "点击输入帖子详情介绍...",
      onChange: (editor) => {
        formData.content = editor.getHtml()
      },
      image: {
        allowBase64: false,
        defaultSize: 350
      },
    })
  // 如果是编辑模式，设置富文本框的初始内容
  if (isEdit.value && formData.content) {
    aiEditor.setContent(formData.content);
  }
});

// 提交表单
const submitForm = async () => {
      if (postId != null) {
          console.log('开始修改了')
          // 修改帖子
          const res = await postStore.updatePosts(formData);
          console.log('修改结果', res);
          if (res.code !== 1) {
            ElMessage.error(res.msg);
          }else {
            router.push("/main/system/post");
            ElMessage.success("修改成功");
          }
      } else {
          // 新增帖子
        const res =  await postStore.addpost(formData);
        if (res.code !== 1) {
          ElMessage.error(res.msg);
        }else {
          console.log('我想要添加成功的弹窗')
          router.push("/main/system/post");
          ElMessage.success("添加成功");
        }
      }
};
const dialogImageUrl = ref('')
const dialogVisible = ref(false)

// 添加表单校验规则
const formRules = {
  title: [
    { required: true, message: '请输入帖子名称', trigger: 'blur' }
  ],
  content: [
    { required: true, message: '请输入帖子介绍', trigger: 'blur' }
  ]
};
</script>

<template>
  <div class="add-container">
    <h2 class="title">{{ isEdit ? '修改帖子信息' : '新增帖子' }}</h2>
    <el-alert
      v-if="isEdit"
      title="当前为修改操作，请确认信息后提交"
      type="info"
      show-icon
      class="mb-4"
    />
    <el-form :model="formData" :rules="formRules" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="帖子标题" prop="title">
            <el-input v-model="formData.title" placeholder="请输入帖子标题"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="开放状态">
        <el-switch
          v-model="formData.delFlag"
          active-value="0"
          inactive-value="1"
          active-text="开放"
          inactive-text="关闭"
        />
      </el-form-item>


      <el-form-item label="帖子介绍" prop="content">
        <div ref="divRef" style="height: 400px; border: 1px solid #dcdfe6; border-radius: 4px;"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="router.back()">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="less">
.add-container {
  padding: 20px;
  background: #fff;
  border-radius: 4px;

  .el-form {
    max-width: 1000px;
    margin: 0 auto;
  }

  :deep(.el-upload-list) {
    width: 100%;
  }

  :deep(.el-upload) {
    width: 100%;
    .el-button {
      width: 100%;
    }
  }

  .el-upload__tip {
    color: #909399;
    font-size: 12px;
    margin-top: 4px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
}
</style>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.title {
   text-align: center; /* 居中显示 */
   font-size: 24px; /* 设置字体大小 */
   font-weight: bold; /* 加粗字体 */
   color: #409EFF; /* 设置字体颜色 */
   margin-bottom: 20px; /* 设置底部间距 */
   padding: 20px 0; /* 设置上下内边距 */
   background-color: #f5f7fa; /* 设置背景颜色 */
   border-radius: 8px; /* 圆角效果 */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
 }

</style>
